<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		
		.lunbo_wrap {
			margin: 0 auto;
			width: 600px;
			border: 1px solid firebrick;
			position: relative;
			overflow: hidden;
		}
		
		.pic_box {
			width: 9999px;
			transition: all .5s linear;
		}
		
		.pic_box li {
			float: left;
		}
		
		.pic_box li img {
			display: block;
			/*width: 500px;*/
		}
		
		.pannel {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 20px;
			margin: 0 auto;
		}
		
		.pannel li {
			width: 10px;
			height: 10px;
			border-radius: 50%;
			background: white;
			margin-left: 10px;
			display: block;
			float: left;
			cursor: pointer;
		}
		
		.pannel li.active {
			background: red;
		}
		
		.right_arrow,
		.left_arrow {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			font-size: 50px;
			color: white;
			background: rgba(0, 0, 0, .5);
			text-align: center;
			cursor: pointer;
		}
		
		.right_arrow {
			right: 0;
		}
		
		.left_arrow {
			left: 0;
		}
	</style>

	<body>
		<div class="lunbo_wrap">
			<ul class="pic_box">
				<li><img src="img/meizi1.jpg" /></li>
				<li><img src="img/meizi2.jpg" /></li>
				<li><img src="img/meizi3.jpg" /></li>
				<li><img src="img/meizi4.jpg" /></li>
				<li><img src="img/meizi5.jpg" /></li>
			</ul>
			<ul class="pannel">
				<!--<li class="active"></li>-->
			</ul>
			<span class="right_arrow">&gt;</span>
			<span class="left_arrow">&lt;</span>
		</div>
	</body>
	<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var lunbo_wrap = document.querySelector(".lunbo_wrap");
		var lunbo_width = lunbo_wrap.clientWidth;
		var all_pic = document.querySelectorAll(".pic_box img")
		var pannel = document.querySelector(".pannel")
		var right_arrow = document.querySelector(".right_arrow")
		var left_arrow = document.querySelector(".left_arrow")
		var pic_box = document.querySelector(".pic_box")
		var cur_index = last_index = 0;
		console.log(lunbo_width);
		lunbo_wrap.style.height = lunbo_width * (400 / 600) + "px";
		//		$(".pic_box img").css("width",lunbo_width)
		//保证图片自适应lunbo_wrap大小

		for(var i = 0; i < all_pic.length; i++) {
			all_pic[i].style.width = lunbo_width + "px";
		}
		//动态添加控制原点
		for(var i = 0; i < all_pic.length; i++) {
			var con_li = document.createElement("li")
			con_li.index = i;
			pannel.appendChild(con_li);
			if(i == 0) {
				con_li.className += " active"
			}
		}
		//给左右箭头添加点击事件
		right_arrow.addEventListener("click", function() {
			rifht();
		})
		left_arrow.addEventListener("click", function() {
			left();
		});
		/*************定时器**************/
		var time = setInterval(rifht, 1000);
		lunbo_wrap.addEventListener("mouseover", function() {
			clearInterval(time)
		})
		lunbo_wrap.addEventListener("mouseout", function() {
			time = setInterval(rifht, 1000)
		})

		function rifht() {
			cur_index++;
			if(cur_index > all_pic.length - 1) {
				cur_index = 0
			} //实现最后一张到第一张图片的转变
			scroll();
		}

		function left() {
			cur_index--;
			if(cur_index < 0) {
				cur_index = all_pic.length - 1
			} //实现第一张到最后张图片的转变
			scroll();
		}
		/********点击控制小圆点*******/
		var all_con_li = document.querySelectorAll(".pannel li")
		console.log(all_con_li)
		for(var i = 0; i < all_con_li.length; i++) {
			all_con_li[i].addEventListener("click", function() {
				cur_index = this.index;
				scroll();
			});
		}

		function scroll() {
			if(cur_index == 0 && last_index == all_pic.length - 1) { //在最后一张图片点击右箭头时这个边界的if会生效（即右边界情况
				var one_sitch = true
				var first_pic = document.querySelector(".pic_box li").cloneNode(true);
				pic_box.appendChild(first_pic);
				pic_box.style.transform = "translateX(-" + all_pic.length * lunbo_width + "px)"; //保证复制的第一张图片会出现在轮播位置
				pic_box.addEventListener("transitionend", function() {
					//最后一张图片做完动画后，把pic_box的动画效果移除，然后迅速变成第一张
					if(one_sitch) {
						one_sitch = false
						this.style.transition = "none"
						pic_box.style.transform = "translateX(0)"
						getComputedStyle(pic_box).width; //这一句必须要写，否则不能实现先去掉动画再加回动画的效果
						this.style.transition = "all .5s linear"
						first_pic.remove();
					}
				})
			} else if(cur_index == all_pic.length - 1 && last_index == 0) { //在第一张图片
				var one_sitch = true
				var last_pic = document.querySelector(".pic_box li:last-child").cloneNode(true); //克隆最后一张图片
				pic_box.insertBefore(last_pic, pic_box.querySelector("li")); //把克隆的最后一张拖添加到最前面
				pic_box.style.transition = "none" //去除动画效果，因为最前面添加了一张图片，本来的第一张图片变成了第二张图片，伪类保证本来的第一张图片还在轮播显示位置，需要把整个pic_box向左移动一个身位
				pic_box.style.transform = "translateX(-" + lunbo_width + "px)"; //把整个pic_box向左移动一个身位
				getComputedStyle(pic_box).width; //这一句必须要写，否则不能实现先去掉动画再加回动画的效果
				pic_box.style.transition = "all .5s linear"; //恢复动画效果
				pic_box.style.transform = "translateX(0)"; //把克隆的图片移动到我们视野
				pic_box.addEventListener("transitionend", function() {
					if(one_sitch) {
						one_sitch = false
						pic_box.style.transition = "none"
						pic_box.style.transform = "translateX(-" + (all_pic.length - 1) * lunbo_width + "px)"
						getComputedStyle(pic_box).width; //这一句必须要写，否则不能实现先去掉动画再加回动画的效果
						pic_box.style.transition = "all .5s linear";
						last_pic.remove();
					}
				})
			} else {
				pic_box.style.transform = "translateX(-" + cur_index * lunbo_width + "px)";
			}
			last_index = cur_index;
			for(var i = 0; i < all_con_li.length; i++) {
				all_con_li[i].className = "";
			}
			all_con_li[cur_index].className += " active"
		}
	</script>

</html>